import { Dropdown, Tooltip } from "antd";
import {
  OpenAIOutlined,
  SendOutlined,
  SmileFilled,
  UserSwitchOutlined,
  CloseCircleFilled,
} from "@ant-design/icons";
import { Button, Popover } from "antd";
import { Avatar } from "@/ui/cpts/std/Avatar";
import "quill/dist/quill.snow.css";
import { Separator } from "@shadcn/separator";
import { EmojiContainer, Wrapper } from "./styles";
import dayjs from "dayjs";
import { useViewModel, Props } from "./model.view";

export function ReplyArea(props: Props) {
  const {
    commentToReply,
    globalModal,
    sendAs,
    editorId,
    emojiNames,

    setSendAs,
    onCancelReplyToClick,
    onSendBtnClick,
    onEmojiClick,
  } = useViewModel(props);

  return (
    <Wrapper className={"reply-area"}>
      <div className={"reply-area__summary"}>
        <div className={"reply-area__summary__left"}>
          {commentToReply ? (
            <>
              <div className={"reply-area__receiver"}>
                <SendOutlined style={{ transform: "rotate(180deg)" }} />
                <Avatar
                  className={"message-card__receiver-avatar"}
                  src={commentToReply.user_info.image}
                  alt={"X"}
                  size={"sm"}
                  style={{ margin: "0 4px" }}
                />
                <strong>{commentToReply.user_info.nickname}</strong>
              </div>
              <div className={"reply-area__create-time"}>
                {dayjs(commentToReply.create_time).fromNow()}
              </div>
              <div className={"reply-area__location"}>
                {commentToReply.ip_location}
              </div>

              <Tooltip placement={"top"} title={"取消"}>
                <CloseCircleFilled onClick={onCancelReplyToClick} />
              </Tooltip>
            </>
          ) : (
            <div />
          )}
        </div>
        <div className={"reply-area__summary__right"}>
          <span>发送自</span>
          <div className={"reply-area__sender"}>
            <Avatar
              className={"message-card__receiver-avatar"}
              src={sendAs.apps.xhs.user?.avatar}
              alt={"X"}
              size={"sm"}
              style={{ margin: "0 4px" }}
            />
            <strong>{sendAs.apps.xhs.user?.nickname}</strong>
          </div>

          {globalModal.sessions.length > 1 && (
            <div className={"switch-button"}>
              <Dropdown
                trigger={["click"]}
                placement={"topLeft"}
                menu={{
                  items: globalModal.sessions.map((s) => ({
                    key: s.id,
                    onClick: () => {
                      setSendAs(s);
                    },
                    label: (
                      <div
                        style={{ display: "inline-flex", alignItems: "center" }}
                      >
                        <Avatar
                          size={"sm"}
                          src={s.apps.xhs.user?.avatar}
                          style={{ marginRight: 4 }}
                        />
                        {s.apps.xhs.user?.nickname}
                      </div>
                    ),
                  })),
                }}
              >
                <UserSwitchOutlined />
              </Dropdown>
            </div>
          )}
        </div>
      </div>
      <div className={"reply-area__main-wrapper"}>
        <div className={"reply-area__main"}>
          <div className={"reply-area__editor"} id={editorId} />
          <Separator />
          <div className={"reply-area__editor-controller"}>
            <div className={"reply-area__action-list"}>
              <Popover
                placement={"left"}
                title={"表情"}
                trigger={"click"}
                content={
                  <EmojiContainer>
                    {emojiNames.map((name) => (
                      <Tooltip
                        title={name.replace(/\w/, "")}
                        mouseEnterDelay={0.5}
                        trigger={"hover"}
                        key={name}
                      >
                        <img
                          onClick={onEmojiClick}
                          alt={name}
                          src={`/statics/assets/emoji/emoji-imgs/${name}.png`}
                          data-name={name}
                        />
                      </Tooltip>
                    ))}
                  </EmojiContainer>
                }
              >
                <SmileFilled style={{ fontSize: 25 }} />
              </Popover>
            </div>
            <div className={"reply-area__control-list"}>
              <Button
                loading={!!globalModal.discussion?.sendQueue.length}
                type={"primary"}
                size={"small"}
                onClick={onSendBtnClick}
              >
                Enter 发送
              </Button>
              <Button type={"primary"} size={"small"} disabled={true}>
                <OpenAIOutlined /> 智能自动回复
              </Button>
            </div>
          </div>
        </div>
      </div>

      {props.disabled && (
        <div className={"reply-area__disable-mask"}>{props.disableTip}</div>
      )}
    </Wrapper>
  );
}
